<!-- 时间线页面 - 展示博客文章的时间线视图，支持按月份分组和分页浏览 -->
<template>
  <div class="timeline-page">
    <!-- 统一导航栏组件 -->
    <AppHeader />

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 内容包装器 -->
      <div class="content-wrapper">
        <!-- 页面标题区域 -->
        <div class="page-header">
          <h1 class="page-title">时间线</h1>
        </div>

        <!-- 示例数据提示 -->
        <div v-if="isUsingSampleData" class="sample-data-notice">
          <el-alert
            title="示例数据模式"
            description="后端服务暂时不可用，当前使用示例数据进行演示。"
            type="info"
            :closable="false"
            show-icon
          />
        </div>

        <!-- 时间线内容容器 -->
        <div class="timeline-container">
          <!-- 时间线分组循环 - 按月份显示博客文章 -->
          <div v-for="group in paginatedTimelineGroups" :key="group.yearMonth" class="timeline-group">
            <!-- 月份标题区域 -->
            <div class="month-header">
              <h2 class="month-title">{{ group.yearMonth }}</h2>
            </div>

            <!-- 该月的博客文章列表 -->
            <div class="posts-list">
              <!-- 博客文章项目 - 点击可跳转到详情页 -->
              <div v-for="post in group.posts" :key="post.id" class="post-item" @click="navigateToBlogDetail(post.id)">
                <!-- 时间线圆点标识 -->
                <div class="post-bullet"></div>
                <!-- 文章内容区域 -->
                <div class="post-content">
                  <!-- 文章发布日期 -->
                  <div class="post-date">{{ post.date }}</div>
                  <!-- 文章标题 -->
                  <div class="post-title">{{ post.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页组件区域 -->
        <div class="pagination-wrapper">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="totalGroups"
            :page-sizes="[3, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
        </div>
      </div>
    </main>

    <!-- 统一页脚组件 -->
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据管理
import { ref, computed, onMounted } from 'vue'
// Vue Router - 提供路由导航功能
import { useRouter } from 'vue-router'

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件

// API工具导入
import { get, API_PATHS } from '../utils/api'

// ==================== 类型定义 ====================

// 时间线文章数据接口
interface TimelinePost {
    id: number
    date: string
    title: string
}

// 时间线组数据接口
interface TimelineGroup {
    yearMonth: string
    posts: TimelinePost[]
}

// 时间线响应数据接口
interface TimelineData {
    success: boolean
    message: string
    data?: TimelineGroup[]
}

// ==================== 路由和响应式数据 ====================

// 路由实例获取
const router = useRouter()  // 用于编程式导航

/**
 * 当前分页的页码
 * @description 用于分页组件，表示当前显示的是第几页
 */
const currentPage = ref(1)

/**
 * 每页显示的时间线组数量
 * @description 控制分页组件中每页显示多少个时间线组
 */
const pageSize = ref(3)

/**
 * 是否正在加载数据
 * @description 控制数据加载状态
 */
const isLoading = ref(false)

/**
 * 是否使用示例数据
 * @description 标识当前是否使用示例数据
 */
const isUsingSampleData = ref(false)

/**
 * 时间线数据
 * @description 按月份分组的博客文章数据，包含年份月份和该月的文章列表
 */
const timelineData = ref<TimelineGroup[]>([])

// ==================== 示例数据 ====================

// 示例时间线数据 - 当API调用失败时使用
const sampleTimelineData: TimelineGroup[] = [
    {
        yearMonth: '2025-01',
        posts: [
            {
                id: 1,
                date: '2025-01-01',
                title: '博客标题-01'
            },
            {
                id: 2,
                date: '2025-01-02',
                title: '博客标题-02'
            },
            {
                id: 3,
                date: '2025-01-15',
                title: 'Vue 3 组合式 API 最佳实践'
            },
            {
                id: 4,
                date: '2025-01-20',
                title: '现代前端开发工具链搭建'
            }
        ]
    },
    {
        yearMonth: '2025-02',
        posts: [
            {
                id: 5,
                date: '2025-02-01',
                title: '博客标题-01'
            },
            {
                id: 6,
                date: '2025-02-02',
                title: '博客标题-02'
            },
            {
                id: 7,
                date: '2025-02-10',
                title: 'CSS Grid 布局完全指南'
            },
            {
                id: 8,
                date: '2025-02-25',
                title: 'TypeScript 高级类型技巧'
            }
        ]
    },
    {
        yearMonth: '2024-12',
        posts: [
            {
                id: 9,
                date: '2024-12-01',
                title: '前端性能优化实战'
            },
            {
                id: 10,
                date: '2024-12-15',
                title: 'React Hooks 深度解析'
            },
            {
                id: 11,
                date: '2024-12-25',
                title: 'Node.js 微服务架构设计'
            }
        ]
    },
    {
        yearMonth: '2024-11',
        posts: [
            {
                id: 12,
                date: '2024-11-01',
                title: 'Docker 容器化部署指南'
            },
            {
                id: 13,
                date: '2024-11-15',
                title: 'Git 工作流程最佳实践'
            }
        ]
    },
    {
        yearMonth: '2024-10',
        posts: [
            {
                id: 14,
                date: '2024-10-01',
                title: 'Webpack 5 配置详解'
            },
            {
                id: 15,
                date: '2024-10-15',
                title: 'ES6+ 新特性总结'
            },
            {
                id: 16,
                date: '2024-10-30',
                title: 'CSS 动画与过渡效果'
            }
        ]
    }
]

// ==================== 方法函数 ====================

/**
 * 使用示例数据
 * @description 当API调用失败时，使用示例数据
 */
const useSampleData = () => {
    isUsingSampleData.value = true
    timelineData.value = sampleTimelineData
}

/**
 * 获取时间线数据
 * @description 从后端API获取时间线数据
 */
const fetchTimelineData = async () => {
    isLoading.value = true
    
    try {
        // 调用后端API获取时间线数据
        const response = await get<TimelineData>(API_PATHS.TIMELINE.LIST)
        
        if (response && response.success && response.data) {
            // 更新时间线数据
            timelineData.value = response.data
        } else {
            // API返回错误，使用示例数据
            console.warn('获取时间线数据失败，使用示例数据')
            useSampleData()
        }
    } catch (error) {
        // 网络错误或API调用失败
        console.error('获取时间线数据失败:', error)
        useSampleData()
    } finally {
        isLoading.value = false
    }
}

/**
 * 跳转到博客详情页面
 * @param postId - 博客文章的ID
 * @description 点击博客文章时，跳转到对应的博客详情页面
 */
const navigateToBlogDetail = (postId: number) => {
    // 使用路由导航到博客详情页面
    router.push(`/blog-detail/${postId}`)
}

/**
 * 处理分页组件页面大小变化
 * @param size - 新的页面大小
 * @description 当用户改变每页显示的时间线组数量时，更新页面大小并重置到第一页
 */
const handleSizeChange = (size: number) => {
    // 更新页面大小
    pageSize.value = size
    // 重置到第一页，确保用户能看到第一页的内容
    currentPage.value = 1
}

/**
 * 处理分页组件当前页码变化
 * @param page - 新的页码
 * @description 当用户点击分页组件中的页码时，更新当前页码
 */
const handleCurrentChange = (page: number) => {
    // 更新当前页码
    currentPage.value = page
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时获取数据
 * @description 页面加载时获取时间线数据
 */
onMounted(() => {
    fetchTimelineData()
})

// ==================== 计算属性 ====================

/**
 * 时间线组总数
 * @description 计算时间线组的总数量，用于分页组件的总数显示
 */
const totalGroups = computed(() => timelineData.value.length)

/**
 * 分页后的时间线组
 * @description 根据当前页码和页面大小计算要显示的时间线组，实现分页功能
 */
const paginatedTimelineGroups = computed(() => {
    // 计算当前页的起始索引
    const startIndex = (currentPage.value - 1) * pageSize.value
    // 计算当前页的结束索引
    const endIndex = startIndex + pageSize.value
    // 返回当前页要显示的时间线组
    return timelineData.value.slice(startIndex, endIndex)
})
</script>

<style scoped lang="scss">
// 导入时间线页面组件样式
@use '../assets/styles/clients/_timeline';
</style>